<template>
	<view class="my-evaluate">
		<template v-if="state">
		<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'" :padding="'0'" :key="item.id" v-for="item in listData">
			<view class="l-c-top">
				<image class="l-c-img" :src="item.logo[0]" mode=""></image>
				<view class="l-c-title">
					<view class="l-c-name">
						<text class="l-c-text">{{item.hotel_name || ''}}</text>
						<text class="l-c-date">{{item.create_time || ''}}</text>
					</view>
					<view class="l-c-iocn">
						<uni-rate :value="item.star" :readonly="true" color="#F5F7FD" active-color="#FED150" />
					</view>
				</view>
			</view>
			<view class="l-c-con">
				<text class="l-c-c-text">{{item.content || ''}}</text>
			</view>
			<view class="l-c-end">
				<uni-tag v-for="(str,index) in item.label" :key="index" :circle="true" :text="str"></uni-tag>
			</view>
		</uni-card>
		<uni-load-more v-if="listData.length" iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1:`${getApp().globalData.imgScr}jd/logo.png`,
				listData:[], // 列表数据
				state:true, // 默认状态
				page:1, // 初始页码
				total:0, // 数据总条数
				status: 'more', // 加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				}
				
			}
		},
		onPullDownRefresh() {
			let _this = this
			// 下拉刷新时触发
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					Object.assign(_this.$data, _this.$options.data())
					_this.getClick()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		onLoad() {
			this.getClick(this.page)
		},
		methods: {
			/**
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				if(e.detail = 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Cleanerindex/evaluate_list',{
						page:page,
						limit:limit,
					})
					this.listData = [...this.listData,...res.data]
					this.state = this.listData.length
					this.total = res.total
					if(this.page >= res.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					//TODO handle the exception
					this.state = false
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
.my-evaluate {
	.uni-card {
		border-radius: 20rpx;
		.uni-card__content {
			display: flex;
			flex-direction: column;
		}
	}
	// 标题栏
	.l-c-top {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.l-c-img {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 40rpx;
			overflow: hidden;
		}
		.l-c-title {
			flex: 1;
			height: 80rpx;
			.l-c-name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.l-c-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.l-c-date {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.5);
				}
			}
			.l-c-iocn {
				display: flex;
				align-items: center;
				width: 100%;
				.l-c-i-img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
				.uni-rate__icon {
						margin-right: 6rpx!important;
						.uni-icons {
							font-size: 28rpx!important;
						}
					}
			}
		}
	}
	// 内容栏
	.l-c-con {
		display: flex;
		margin-bottom: 10rpx;
		.l-c-c-text {
			font-size: 24rpx;
			font-weight: 500;
			line-height: 1.5em;
			color: rgba($color: #000000, $alpha: 0.7);
		}
	}
	// 底部标签栏
	.l-c-end {
		margin: 10rpx;
		.uni-tag {
			font-size: 20rpx;
			font-weight: 500;
			background-color: rgba($color: #54E48D, $alpha: 0.15);
			color: #53E38C;
			margin-right: 20rpx;
			border: 0;
		}
	}
	.uni-load-more {
		height: auto;
		margin-bottom: 20rpx;
	}
}
</style>
